<template>
    <el-container>
        <el-header :height="'auto'" class="mb20">
            <breadcrumb :title="'实施工单'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-select v-model="type" placeholder="资源类型" size="small" class="select">
                                <el-option
                                    v-for="item in typeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-input v-model="resName" placeholder="请输入资源名称" size="small"
                                      class="input"></el-input>
                            <el-button class="primary" size="small" @click="getList(1)">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" :height="'100%'"
                                   ref="table">
                        <template slot="resType" slot-scope="scope">
                            <span>{{scope.row.resType==1?'服务接口类':(scope.row.resType==2?'服务页面类':'数据交换类')}}</span>
                        </template>
                        <template slot="resState" slot-scope="scope">
                            <span>{{scope.row.resState==1?'正常':'异常'}}</span>
                        </template>
                        <template slot="implementationState" slot-scope="scope">
                            <span v-if="scope.row.implementationState==0">实施中</span>
                            <span v-else-if="scope.row.implementationState==1">已完成</span>
                            <span v-else-if="scope.row.implementationState==2">已中止</span>
                            <span v-else-if="scope.row.implementationState==3">已回收</span>
                            <span v-else-if="scope.row.implementationState==4">待回收</span>
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false" v-if="scope.row.implementationState==0"
                                         @click="change(scope.row,1)">完成
                                </el-link>
                                <el-link type="primary" :underline="false" v-if="scope.row.implementationState==0"
                                         @click="openDialog(scope.row,2)">中止
                                </el-link>
                                <el-link type="primary" :underline="false" v-if="scope.row.implementationState==4"
                                         @click="openDialog(scope.row,3)">回收
                                </el-link>
                                <el-link type="primary" :underline="false"
                                         v-if="scope.row.implementationState==2||scope.row.implementationState==3||scope.row.implementationState==4"
                                         @click="openLook(scope.row)">查看原因
                                </el-link>
                            </div>
                        </template>
                        <template slot="applyNum" slot-scope="scope">
                            <el-link type="primary" :underline="false" @click="openDetail(scope.row)">
                                {{scope.row.applyNum}}
                            </el-link>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="data" v-if="data" class="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <dialog-box :show.sync="showEdit" ref="explainEdit" :title="'说明'" :width="'450px'"
                        @save="saveDialog" @cancel="closeDialog">
                <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm"
                         size="small" label-width="100px" :label-position="'left'" v-if="currentList">
                    <el-form-item :label="(currentList.implementationState==2?'中止':'回收') + '原因：'" prop="remark">
                        <el-input type="textarea" v-model="ruleForm.remark" size="small"
                                  :autosize="{ minRows: 4, maxRows: 4}"></el-input>
                    </el-form-item>
                </el-form>
            </dialog-box>
            <dialog-box :show.sync="showLook" ref="explainLook" :title="'说明'" :width="'450px'">
                <el-form class="form-common" size="small" label-width="100px" :label-position="'left'">
                    <el-form-item :label="(currentList.implementationState==2?'中止':'回收') + '原因：'" prop="remark"
                                  v-if="currentList">
                        {{currentList.cancelReason}}
                    </el-form-item>
                </el-form>
                <div slot="footer" class="text-center">
                    <slot name="footer">
                        <el-button size="small" @click="showLook=false">关 闭</el-button>
                    </slot>
                </div>
            </dialog-box>
            <transition name="slide">
                <router-view @upload="getList"></router-view>
            </transition>
        </el-main>
    </el-container>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import dialogBox from '../../components/dialog'
    import selectTree from '../../components/select-tree'

    export default {

        data() {
            return {
                typeOptions: [
                    {
                        label: '',
                        value: null
                    },
                    {
                        label: '服务接口类',
                        value: 1
                    },
                    {
                        label: '数据交换类',
                        value: 3
                    },
                    {
                        label: '服务页面类',
                        value: 2
                    }
                ],
                tableData: [],
                header: [
                    {
                        prop: 'resName',
                        label: '资源名称',
                        minWidth: '180',
                        align: 'center'
                    },
                    {
                        prop: 'resUniqueCode',
                        label: '资源唯一标识符',
                        minWidth: '180',
                        align: 'center'
                    },
                    {
                        prop: 'implementationWorkOrder',
                        label: '实施工单号',
                        minWidth: '130',
                        align: 'center'
                    },
                    {
                        prop: 'applyNum',
                        label: '申请单号',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'resType',
                        label: '资源类型',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'resourceConsumers',
                        label: '申请部门',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'approvalTime',
                        label: '审批时间',
                        minWidth: '150',
                        align: 'center'
                    },
                    // {
                    //     prop: 'resState',
                    //     label: '资源状态',
                    //     minWidth: '100',
                    //     align: 'center'
                    // },
                    {
                        prop: 'implementationState',
                        label: '实施状态',
                        minWidth: '100',
                        align: 'center'
                    },
                    // {
                    //     prop: 'serviceAddress',
                    //     label: '服务地址',
                    //     minWidth: '200',
                    //     align: 'center'
                    // },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '120',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'resType', 'resState', 'implementationState', 'applyNum'],
                data: {},
                loading: false,
                index: 1,
                resName: '',
                resPower: 1,
                type: '',
                currentList: null,
                showEdit: false, // 填写原因
                showLook: false, // 查看原因
                showType: null, // 弹窗类型
                ruleForm: {
                    remark: ''
                },
                rules: {
                    remark: [
                        {required: true, message: '请输入原因', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            openDialog(row, type) {
                // this.currentList = row
                // this.showType = type
                // this.showEdit = true
                let msg = type === 2 ? '确定中止吗？' : '确定回收吗？'
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.change(row, type)
                }).catch(() => {
                })
            },
            openLook(row) {
                this.currentList = row
                this.showLook = true
            },
            saveDialog() {
                let _this = this
                this.validate('ruleForm', () => {
                    this.change(this.currentList, this.showType, function () {
                        _this.showEdit = false
                        _this.closeDialog()
                    })
                })
            },
            closeDialog() {
                this.$refs.ruleForm.resetFields()
                this.ruleForm = {
                    remark: ''
                }
                this.showEdit = false
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/admin/implOrderList', {
                    current: this.index || 1,
                    size: 15,
                    resName: this.resName,
                    type: this.type
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.data = result.data
                        delete this.data['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            change(row, type, callback) {
                let _this = this
                if (type === 3) {
                    this.$http.post('/admin/retrieveResource', {
                        resId: row.resId,
                        id: row.id,
                        cancelReason: this.ruleForm.remark
                    }).then(result => {
                        if (result.success) {
                            this.getList()
                            this.$message.success({
                                message: '资源回收成功',
                                showClose: true
                            })
                        }
                        if (callback) callback()
                    })
                } else {
                    if (type === 1) {
                        this.$confirm('确定实施已完成吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            implDone(row, type, callback)
                        }).catch(() => {
                        })
                    } else {
                        implDone(row, type, callback)
                    }
                }

                function implDone(row, type, callback) {
                    _this.$http.post('/admin/implDone', {
                        id: row.id,
                        orderOperate: type,
                        cancelReason: _this.ruleForm.remark
                    }).then(result => {
                        if (type === 2) {
                            _this.$message.success({
                                message: '实施中止成功',
                                showClose: true
                            })
                        } else {
                            _this.$message.success({
                                message: '实施完成成功',
                                showClose: true
                            })
                        }
                        if (result.success) _this.getList()
                        if (callback) callback()
                    })
                }
            },
            reset() {
                this.resName = ''
                this.type = null
                this.getList(1)
            },
            // 打开查看申请单详情页面
            openDetail(row) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    query: {
                        applyNumChild: row.applyNum,
                        preselectRes: row.preselectRes === 1,
                        fromImplementation: true
                    }
                })
            }
        },
        components: {
            tableExample,
            breadcrumb,
            page,
            dialogBox,
            selectTree
        }
    }
</script>

<style scoped lang="less">
    .release {
        margin: 0 30px;

        .form-item-label {
            width: 90px;
            color: #333;
            padding-right: 20px;
        }

        .form-item-content {
            margin-left: 90px;

            > * {
                width: 100%;
            }
        }
    }
</style>
